import { IAskAndAnswerItem, IParamsItem, } from "@/utils/questionHandle"
import React, { useState, useEffect } from "react"
import styles from "./questionHandle.less"
import { DownOutlined, SearchOutlined } from '@ant-design/icons';
import { Checkbox, Input, Button, Pagination, Switch, message, Alert, Modal } from 'antd';
import useStore from "@/context/useStore";
import { observer } from 'mobx-react-lite';
import { getanswerQuality, getanswerShield, getdeleteQuality, getdeleteShield, replyRightAnswer } from "@/services/modules/questionHandle";
import { Link } from "umi";
import Editor from 'for-editor';
import ModalsBox from "@/components/Modals"
const statusList = [{ name: "全部", status: "" }, { name: "精品", status: "1" }, { name: "认证", status: "2" }, { name: "被屏蔽", status: "3" }]
const titleAll = ["待处理问题", "所有回答"]
const questionHandle: React.FC = (props) => {
    //mobx 状态库
    let { Handle} = useStore()
    let [titleTab, setTitleTab] = useState(0)
    let [title, setTitle] = useState("")
    //查看全部内容
    let [lookAll, setLookAll] = useState(!true)
    let queryParams: IParamsItem = { classId: "9", pageNum: 1, pageSize: 10 };
    useEffect(() => {
        if (Handle.status) {
            queryParams = { ...queryParams, pageNum: Handle.pageNum, pageSize: 10, classId: queryParams.classId, status: Handle.status, searchTitle: Handle.questionTitle }
        } else {
            queryParams = { ...queryParams, pageNum: Handle.pageNum, pageSize: 10, classId: queryParams.classId, status: Handle.status, searchTitle: Handle.questionTitle }
        }
        Handle.getquestionHandle()
        //所有问答接口数据
        Handle.getQuestionsAllList(queryParams)
        //所有待处理问答
        Handle.getPendingList(queryParams)
    }, [Handle.status, Handle.pageNum, titleTab, Handle.questionTitle])

    //精品按钮提示
    const successBoutique = () => {
        message.success(<Alert message="设置精品成功" type="success" />);
    };
    const warningBoutique = () => {
        message.warning(<Alert message="取消精品成功" type="warning" />);
    };
    //屏蔽按钮提示  Shield
    const successShield = () => {
        message.success(<Alert message="屏蔽成功" type="success" />);
    };
    const warningShield = () => {
        message.warning(<Alert message="取消屏蔽成功" type="warning" />);
    };
    //批量回答弹框
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [questionIdList, setquestionIdList] = useState<string[]>([]);
    const showModal = () => {
        //判断是否有选中的问题
        let len = Handle.questionHandleList.filter(item => item.flag == true)
        let questionId: string[] = []
        if ( len.length != 0) {
            len.filter(item => {
                questionId.push(item.answerId)
                setquestionIdList(questionId)
            })
            setIsModalVisible(true);
        } else {
            alert("请勾选问题")
        }
    };
    //批量回答
    const handleOk = () => {
        let params = { replyContext: title, questionIdList: questionIdList }
        replyRightAnswer(params).then(res => {
            alert("回答成功")
        })
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //批量相似回答
    const [isModalVisible2, setIsModalVisible2] = useState(false);
    const showModal2 = () => {
        //判断是否有选中的问题
        let len = Handle.questionHandleList.filter(item => item.flag == true)
        if ( len.length != 0) {
            //符合条件  显示弹框
            setIsModalVisible2(true);
        } else {
            alert("请勾选问题")
        }
    }
    const handleOk2 = () => {
        setIsModalVisible2(false);
    };
    const handleCancel2 = () => {
        setIsModalVisible2(false);
    };
    return (
        <div className={styles.mainBox}>
            <div className={styles.main}>
                <div className={styles.main_title}>
                    问答 / 待处理问答
                </div>
                <div className={styles.main_top}>
                    <div className={styles.main_gradeName}>
                        <span>来源 : </span>
                        {
                            Handle.questionHandle.map((item) => {
                                return <span key={item.id}>{item.classname}</span>
                            })
                        }
                    </div>
                    <div className={styles.main_status}>
                        <span>状态 : </span>
                        {
                            statusList.map((item) => {
                                return <span key={item.status} className={item.status === Handle.status ? styles.active : ""}
                                    onClick={() => { Handle.setStatus(item.status) }}
                                >{item.name}</span>
                            })
                        }
                    </div>
                </div>
                <div className={styles.main_con}>
                    <div className={styles.titleBox}>
                        {
                            titleAll.map((item, index) => {
                                return <span key={index} onClick={() => { setTitleTab(index) }} className={index === titleTab ? styles.active : ""}>{item}</span>
                            })
                        }

                    </div>
                    {/* 复选框  批量操作 */}
                    <div className={styles.con_top}>
                        {/* 全选框 */}
                        <div className={styles.conTop_checkedAll}>
                            <Checkbox onChange={(e) => { Handle.setCheckedAll(e.target.checked) }} checked={Handle.checkedAll}></Checkbox>
                        </div>
                        {/* 批量操作 */}
                        <div className={styles.conTop_Operation}>
                            <Button type="primary" onClick={showModal}>批量回答</Button>
                            {/* 批量回答弹框 */}
                            <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}
                            >
                                <div className={styles.conCenter} >
                                    <Editor placeholder="开始编辑..."
                                        value={title}
                                        style={{ height: 300 }}
                                        onChange={(value) => { setTitle(value) }} />
                                </div>
                            </Modal>
                            {/* 批量选择相似问题答案 */}
                            <Button type="primary" onClick={showModal2}>批量选择相似问题答案</Button>
                            <Modal title="选择其它有“正确答案”的类似问题"
                                visible={isModalVisible2} onOk={handleOk2} onCancel={handleCancel2}
                                bodyStyle={{ width: 1000 }}
                                width={1000}
                            >
                                <ModalsBox />
                            </Modal>
                            <Input placeholder="搜索问答"
                                suffix={<SearchOutlined onClick={() => { Handle.setQuestionTitle(Handle.title) }} />}
                                onChange={e => Handle.setTitle(e.target.value)} onKeyDown={e => {
                                    if (e.keyCode === 13) {
                                        Handle.setQuestionTitle(Handle.title)
                                    }
                                }} />
                        </div>
                    </div>
                    {/* 具体内容数据 */}
                    <div className={styles.con_content}>
                        {
                            (titleTab == 1 ? Handle.questionHandleList : Handle.pendingList).map((item, index) => {
                                return <div className={styles.divs} key={item.answerId}>
                                    <div className={styles.checkItem}>
                                        {/* 反选 */}
                                        <Checkbox onChange={(e) => { Handle.setCheckedItem(index) }}
                                            checked={item.flag}
                                        ></Checkbox>
                                    </div>
                                    <div className={styles.divsC}>

                                        {/* 实训类型 */}
                                        <div className={styles.divs_top}>
                                            <div className={styles.divs_top_left}>
                                                <span>{item.qUserName}</span>
                                                <span>{item.replyTime}</span>
                                                <span>实训类型:{statusList.map(item1 => {
                                                    if (item1.status == item.typeNum) {
                                                        return <span className={styles.typeNum} key={item1.status}>{item1.name}</span>
                                                    }
                                                })}</span>
                                            </div>
                                            <div className={styles.divs_top_right}>
                                                <img src={Handle.xx} alt="" /><span>{item.answerCount}</span>
                                            </div>
                                        </div>
                                        <div className={styles.divs_con}>
                                            <div className={styles.divs_question_title}>

                                                <span>{item.quality ? <img src="http://111.203.59.61:8060/static/img/boutique.fc46be52.svg" alt="" /> : ""}</span>
                                                <span>{item.authentication ? <img src="http://111.203.59.61:8060/static/img/authentication.c814dd7c.svg" alt="" /> : ""}</span>
                                                <span>{item.questionTitle}</span>
                                            </div>
                                            <div className={styles.divs_con_children}>
                                                <div className={lookAll ? styles.questionContentActive : styles.questionContent}>
                                                    {item.questionContent}
                                                </div>
                                                <div className={styles.lookAll}><span onClick={() => {
                                                    setLookAll(!false)
                                                }}>查看全部</span><DownOutlined /></div>
                                            </div>
                                        </div>
                                        <div className={styles.divs_comment}>{item.labels.map((item1, index1) => {
                                            return <span key={index1}>{item1}</span>
                                        })}</div>
                                        <div className={styles.btnBox}>
                                            <Button type="primary"><Link to={`/teachers/AnswerDetailManage?answerId=${item.answerId}`}>回答</Link></Button>
                                            <Button type="primary">选择其它有“正确答案”的类似问题</Button>
                                            <Button type="primary"
                                                style={{ border: "1px solid rgb(255, 141, 65)", color: "rgb(255, 141, 65)", background: "#fff" }}
                                                onClick={() => {
                                                    if (item.quality == 1) {
                                                        //设置取消
                                                        getdeleteQuality(item.answerId)
                                                        Handle.getQuestionsAllList(queryParams);
                                                        warningBoutique();
                                                    } else {
                                                        //设置精品
                                                        getanswerQuality(item.answerId)
                                                        Handle.getQuestionsAllList(queryParams);
                                                        successBoutique();
                                                    }
                                                }
                                                }>{item.quality ? "取消精品" : "设为精品"}</Button>

                                        </div>
                                    </div>
                                    {/* //屏蔽 */}
                                    <div className={styles.divsR}>
                                        <Switch checked={item.shield ? true : false} onClick={() => {
                                            if (item.shield == 1) {
                                                //取消屏蔽
                                                getdeleteShield(item.answerId)
                                                Handle.getQuestionsAllList(queryParams)
                                                warningShield()
                                            } else {
                                                //设置屏蔽
                                                getanswerShield(item.answerId)
                                                Handle.getQuestionsAllList(queryParams)
                                                successShield()
                                            }
                                        }} />
                                    </div>
                                </div>
                            })
                        }

                        <div className={styles.page}>
                            <Pagination
                                defaultCurrent={1}
                                onChange={(e) => { Handle.setPageNum(e) }}
                                total={titleTab ? Handle.questionListLen : Handle.pendingListLen} size="default"
                                showSizeChanger showQuickJumper pageSize={10} pageSizeOptions={["10"]} />
                        </div>

                    </div>
                </div>
            </div>
        </div>
    )

}

export default observer(questionHandle)